<template>
  <a-modal
    v-model:visible="visible"
    title="新增等级"
    @ok="handleOk"
    ok-text="确定"
    cancel-text="取消"
  >
    <a-form
      ref="formRef"
      :model="modelRef"
      :rules="rulesRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="等级名称" name="name">
        <a-input v-model:value="modelRef.name" />
      </a-form-item>
      <a-form-item label="会员等级" name="level">
        <a-select v-model:value="modelRef.level">
          <a-select-option
            v-for="id in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
              19, 20,
            ]"
            :key="id"
            :value="id"
          >
            {{ id }}级
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="升级条件" name="min_expend_money">
        <a-input
          type="number"
          min="0"
          v-model:value="modelRef.min_expend_money"
          addon-before="实际消费累计最低"
          addon-after="元"
        />
      </a-form-item>
      <a-form-item label="是否启用" name="status">
        <a-switch v-model:checked="modelRef.status" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { toRefs, reactive, nextTick, defineComponent } from "vue";
import { notice } from "@/config";
import { add } from "@/api/user/Grade";
export default defineComponent({
  components: {},
  setup(props, { emit }) {
    let state = reactive({
      visible: false,
      formRef: {},
      item: {},
    });
    let modelRef = reactive({
      name: "",
      level: "",
      status: true,
      min_expend_money: 0,
    });
    let rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入登录名",
        },
      ],
      level: [
        {
          required: true,
          message: "请输入等级",
        },
      ],
      min_expend_money: [
        {
          required: true,
          message: "请输入实际消费累计金额",
        },
      ],
    });
    // 显示对话框
    const show = () => {
      state.visible = state.visible ? false : true;
      nextTick(() => {
        state.formRef.resetFields();
      });
    };

    const handleOk = () => {
      state.formRef.validate().then(() => {
        add({
          name: modelRef.name,
          level: modelRef.level,
          status: modelRef.status ? 1 : 0,
          min_expend_money: modelRef.min_expend_money,
        }).then((res) => {
          emit("okCallback", res);
          notice(res.status == 200 ? "success" : "error", res.message);
          state.visible = false;
        });
      });
    };

    return {
      show,
      handleOk,
      ...toRefs(state),
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      modelRef,
      rulesRef,
    };
  },
});
</script>
